<template>
  <div class="theme-store-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🎨 主题商店</span>
          <div class="header-actions">
            <el-input v-model="searchKeyword" placeholder="搜索主题" clearable style="width: 300px;" size="small">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" @click="handleCreateTheme">
              <el-icon><Brush /></el-icon>
              创建主题
            </el-button>
          </div>
        </div>
      </template>

      <!-- 主题分类 -->
      <el-tabs v-model="activeCategory">
        <el-tab-pane label="推荐主题" name="recommend" />
        <el-tab-pane label="官方主题" name="official" />
        <el-tab-pane label="社区主题" name="community" />
        <el-tab-pane label="我的主题" name="mine" />
      </el-tabs>

      <!-- 主题列表 -->
      <el-row :gutter="20" class="theme-list">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="theme in filteredThemes" :key="theme.id">
          <el-card class="theme-card" shadow="hover">
            <div class="theme-preview" :style="{ background: theme.preview }">
              <div class="preview-overlay">
                <el-button size="small" @click="handlePreview(theme)">
                  <el-icon><View /></el-icon>
                  预览
                </el-button>
              </div>
            </div>
            <div class="theme-info">
              <h3 class="theme-name">{{ theme.name }}</h3>
              <p class="theme-desc">{{ theme.description }}</p>
              <div class="theme-meta">
                <el-tag v-if="theme.official" type="danger" size="small">官方</el-tag>
                <el-tag v-if="theme.hot" type="warning" size="small">热门</el-tag>
                <span class="meta-item">
                  <el-icon><Download /></el-icon>
                  {{ theme.downloads }}
                </span>
                <span class="meta-item">
                  <el-icon><Star /></el-icon>
                  {{ theme.rating }}
                </span>
              </div>
              <div class="theme-colors">
                <span class="color-dot" v-for="color in theme.colors" :key="color" :style="{ background: color }"></span>
              </div>
            </div>
            <div class="theme-actions">
              <el-button 
                v-if="!theme.active" 
                type="primary" 
                @click="handleApply(theme)"
              >
                <el-icon><Select /></el-icon>
                应用
              </el-button>
              <el-button 
                v-else 
                type="success" 
                disabled
              >
                <el-icon><Check /></el-icon>
                使用中
              </el-button>
              <el-button @click="handleViewTheme(theme)">详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 主题预览对话框 -->
    <el-dialog v-model="previewDialogVisible" title="主题预览" width="90%" fullscreen>
      <div class="theme-preview-container" :style="getThemeStyle(currentTheme)">
        <div class="preview-header">
          <h2>{{ currentTheme?.name }}</h2>
          <el-button type="primary" @click="handleApply(currentTheme)">应用此主题</el-button>
        </div>
        <div class="preview-content">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card>
                <template #header>
                  <span>示例卡片1</span>
                </template>
                <p>这是主题预览内容</p>
                <el-button type="primary">主按钮</el-button>
                <el-button>次按钮</el-button>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <template #header>
                  <span>示例卡片2</span>
                </template>
                <el-tag>标签</el-tag>
                <el-tag type="success">成功</el-tag>
                <el-tag type="warning">警告</el-tag>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>示例表格</span>
                </template>
                <el-table :data="[{ name: '示例', value: 100 }]" border>
                  <el-table-column prop="name" label="名称" />
                  <el-table-column prop="value" label="数值" />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, markRaw } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Brush, View, Download, Star, Select, Check } from '@element-plus/icons-vue'

const searchKeyword = ref('')
const activeCategory = ref('recommend')
const previewDialogVisible = ref(false)
const currentTheme = ref(null)

// 主题列表
const themes = ref([
  {
    id: 1,
    name: '经典蓝',
    description: '专业的商务蓝色主题，适合企业使用',
    preview: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    colors: ['#667eea', '#764ba2', '#409eff', '#303133'],
    official: true,
    hot: true,
    downloads: 12345,
    rating: 4.9,
    active: true,
    primaryColor: '#409eff',
    successColor: '#67c23a',
    warningColor: '#e6a23c',
    dangerColor: '#f56c6c'
  },
  {
    id: 2,
    name: '清新绿',
    description: '清新自然的绿色主题，舒适护眼',
    preview: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    colors: ['#43e97b', '#38f9d7', '#67c23a', '#606266'],
    official: true,
    hot: true,
    downloads: 9876,
    rating: 4.8,
    active: false,
    primaryColor: '#67c23a',
    successColor: '#85ce61',
    warningColor: '#ebb563',
    dangerColor: '#f78989'
  },
  {
    id: 3,
    name: '优雅紫',
    description: '优雅神秘的紫色主题，彰显品味',
    preview: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    colors: ['#a8edea', '#fed6e3', '#9c27b0', '#5e35b1'],
    official: false,
    hot: true,
    downloads: 7654,
    rating: 4.7,
    active: false,
    primaryColor: '#9c27b0',
    successColor: '#66bb6a',
    warningColor: '#ffa726',
    dangerColor: '#ef5350'
  },
  {
    id: 4,
    name: '暗黑模式',
    description: '时尚酷炫的暗黑主题，保护视力',
    preview: 'linear-gradient(135deg, #434343 0%, #000000 100%)',
    colors: ['#434343', '#000000', '#1e1e1e', '#2d2d2d'],
    official: true,
    hot: true,
    downloads: 15432,
    rating: 4.9,
    active: false,
    primaryColor: '#409eff',
    successColor: '#67c23a',
    warningColor: '#e6a23c',
    dangerColor: '#f56c6c'
  },
  {
    id: 5,
    name: '活力橙',
    description: '充满活力的橙色主题，激发热情',
    preview: 'linear-gradient(135deg, #f5af19 0%, #f12711 100%)',
    colors: ['#f5af19', '#f12711', '#ff9800', '#ff5722'],
    official: false,
    hot: false,
    downloads: 4567,
    rating: 4.6,
    active: false,
    primaryColor: '#ff9800',
    successColor: '#8bc34a',
    warningColor: '#ffc107',
    dangerColor: '#f44336'
  },
  {
    id: 6,
    name: '科技蓝',
    description: '科技感十足的蓝色主题，未来风格',
    preview: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    colors: ['#4facfe', '#00f2fe', '#03a9f4', '#00bcd4'],
    official: false,
    hot: false,
    downloads: 6789,
    rating: 4.8,
    active: false,
    primaryColor: '#03a9f4',
    successColor: '#4caf50',
    warningColor: '#ff9800',
    dangerColor: '#f44336'
  }
])

const filteredThemes = computed(() => {
  let result = themes.value

  if (activeCategory.value === 'official') {
    result = result.filter(t => t.official)
  } else if (activeCategory.value === 'community') {
    result = result.filter(t => !t.official)
  } else if (activeCategory.value === 'mine') {
    result = result.filter(t => t.author === '我')
  }

  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(t =>
      t.name.toLowerCase().includes(keyword) ||
      t.description.toLowerCase().includes(keyword)
    )
  }

  return result
})

const handlePreview = (theme) => {
  currentTheme.value = theme
  previewDialogVisible.value = true
}

const handleApply = (theme) => {
  themes.value.forEach(t => t.active = false)
  theme.active = true
  ElMessage.success(`主题 "${theme.name}" 已应用！`)
  previewDialogVisible.value = false
}

const handleViewTheme = (theme) => {
  currentTheme.value = theme
  ElMessage.info('查看主题详情')
}

const handleCreateTheme = () => {
  ElMessage.info('打开主题创建工具')
}

const getThemeStyle = (theme) => {
  if (!theme) return {}
  return {
    '--el-color-primary': theme.primaryColor,
    '--el-color-success': theme.successColor,
    '--el-color-warning': theme.warningColor,
    '--el-color-danger': theme.dangerColor
  }
}
</script>

<style scoped>
.theme-store-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.theme-list {
  margin-top: 20px;
}

.theme-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  cursor: pointer;
}

.theme-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.theme-preview {
  height: 150px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.theme-preview:hover .preview-overlay {
  opacity: 1;
}

.theme-info {
  text-align: center;
}

.theme-name {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.theme-desc {
  margin: 0 0 15px 0;
  font-size: 13px;
  color: #606266;
  height: 40px;
  overflow: hidden;
}

.theme-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: #909399;
}

.theme-colors {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.theme-preview-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 500px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.preview-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

